<template>
	<view class="content">
		<view class="letter">
			<blcok v-for="(item,index) in openCityList" :key="index">
				<view class="row" @click="clickViewId(item,index)">
					<view class="col-24 t_center t_size_24" :class="index==viewIndex?'active':''">
						{{item.letter}}
					</view>
				</view>
			</blcok>
		</view>
		<scroll-view scroll-y="true" :scroll-into-view="view_id">
			<view>
				<view class="title">
					热门目的地
				</view>
				<view class="name">
					<view class="row">
						<view class="areaName t_center" v-for="(item,index) in hotCityList" :key="index" @click="clickItem(item)">
							{{item.cityName}}
						</view>
					</view>
				</view>
			</view>
			<block v-for="(item,index) in openCityList" :key="index">
				<view :id="item.letter">
					<view class="title">
						{{item.letter}}
					</view>
					<view class="name">
						<view class="row">
							<view class="col-24" v-for="(items,ins) in item.cityList" :key="ins" @click="clickItem(items)">
								{{items.cityName}}
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	const QQMapWX = require('../../common/js/qqmap-wx-jssdk.min.js');
	var qqmask;
	export default {
		data() {
			return {
				hotCityList: [],
				openCityList: [],
				viewIndex: 0,
				view_id: 'remen',
				type: 0,
				region_fix: 0
			}
		},
		onLoad(option) {
			qqmask = new QQMapWX({
				key: 'FFJBZ-32W6O-ZTPWU-S6G2B-AJB3Z-DKBV7'
			})
			this.region_fix = option.region_fix;
			this.type = option.type;
			this.load()
		},
		methods: {
			async load() {
				let res = await this.$api.request(this.$api.public.getCityList, {
					"endCityCode": "",
					"startCityCode": ""
				});
				if(res){
					this.hotCityList = res.hotCityList;
					this.openCityList = res.openCityList;
				}
			},
			clickViewId(item, index) {
				this.view_id = item.letter;
				this.viewIndex = index;
			},
			clickItem(item){
				if(this.type == 4){
					qqmask.getSuggestion({
						keyword: '市政府',
						region: item.cityName,
						region_fix:1,
						address_format: 'short',
						success: (res)=>{
							uni.setStorage({
								key:'selectArea',
								data:res.data[0],
								success() {
									uni.navigateBack()
								}
							})
						}
					})
				}else{
					this.$public.redTo(`public/select_by?type=2&region_fix=${this.type}&text=${item.cityName}`);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.letter {
		width: 100rpx;
		line-height: 35rpx;
		position: fixed;
		right: 0;
		z-index: 9;
		color: #333333;
		top: 250rpx;

		.active {
			color: #6CBF30;
		}
	}

	scroll-view {
		max-height: 100vh;

		.title {
			width: 92%;
			padding: 0 4%;
			color: #999999;
			height: 72rpx;
			line-height: 72rpx;
		}

		.name {
			width: 92%;
			padding: 0 4%;
			color: #333333;
			background-color: #FFFFFF;
			border-bottom: 1px solid #ededed;

			.areaName {
				width: calc(100%/24 * 7 - 2px);
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 11rpx;
				margin: 15rpx 0;
				margin-right: calc(100% / 24 * 1);
				border: 1px solid #CCCCCC;
			}

			.col-24 {
				height: 88rpx;
				line-height: 88rpx;
				border-bottom: 1px solid #ededed;
			}
		}
	}
</style>
